<template>
    <div>
        <Main>
            <template v-slot:left>
                <div class="left-part-container left-part-1">
                    <img class="part-title left-title" src="@/assets/home/left-title.png" alt="">
                    <BasePanel :baseInfo="baseInfo"></BasePanel>
                </div>
                <div class="left-part-container left-part-2">
                    <img class="part-title left-title" src="@/assets/home/wether-title.png" alt="">
                    <img class="refresh-icon left-title" src="@/assets/home/icon-refresh.png" alt="">
                    <img class="tree" src="@/assets/home/tree.png" alt="">
                    <div class="params params-win">
                        <div class="params-title">风力风向</div>
                        <img class="params-icon" src="@/assets/home/icon-win.png" alt="">
                        <div class="params-data">{{weather.day_wind_direction}}{{weather.day_wind_power.split(" ")[0]}}
                        </div>
                    </div>
                    <div class="params params-air">
                        <div class="params-title">空气质量</div>
                        <img class="params-icon" src="@/assets/home/icon-air.png" alt="">
                        <div class="params-data">优</div>
                    </div>
                    <div class="params params-sunny">
                        <div class="params-title">日照</div>
                        <img class="params-icon" src="@/assets/home/icon-sunny.png" alt="">
                        <div class="params-data">{{getHour(weather.sun_begin_end.split('|')[0],weather.sun_begin_end.split('|')[1])}}小时</div>
                    </div>
                    <div class="params params-temp">
                        <div class="params-title">温度</div>
                        <img class="params-icon" src="@/assets/home/icon-temp.png" alt="">
                        <div class="params-data">{{weather.night_air_temperature}}-{{weather.day_air_temperature}}°C
                        </div>
                    </div>
                    <div class="params params-rain">
                        <div class="params-title">降水量</div>
                        <img class="params-icon" src="@/assets/home/icon-rain.png" alt="">
                        <div class="params-data">{{CurrentData.rainfall_sensor}}毫米</div>
                    </div>
                </div>
            </template>
            <template v-slot:right>
                <div class="left-part-container right-part-1">
                    <img class="part-title left-title" src="@/assets/home/right-title.png" alt="">
                    <Otype></Otype>
                </div>

                <div class="left-part-container right-part-2">
                    <img class="part-title left-title" src="@/assets/home/wlw-title.png" alt="">
                    <Wlw></Wlw>
                </div>

                <div class="left-part-container right-part-3">
                    <img class="part-title left-title" src="@/assets/home/guangai-title.png" alt="">
                    <div class="display-control-history">
                        <div class="display-item" v-for="i in controlHistory" :key="i.create_time">
                            <span>{{dateFormat('YYYY-mm-dd HH:MM:SS',new Date(i.create_time))}}</span>
                            <span>{{placeMap(i.relay_num)}}</span>
                            <span :style="{'color':i.relay_state?'#07ffff':'#FF4A47'}">{{i.relay_state?"打开阀门":"关闭阀门"}}</span>
                        </div>
                    </div>
                </div>
                <img class="part-title left-title logo" src="@/assets/home/logo.png" alt="">
            </template>
        </Main>
    </div>
</template>

<script>
    import Main from "./Main";
    import BasePanel from "../component/BasePanel";
    import Otype from "../component/Otype";
    import Wlw from "../component/wlw";
    import Tline from "../component/line";
    import {getWeather, getLandIds, getCurrentData,controlQuery} from "../api/home";

    export default {
        components: {Main, BasePanel, Otype, Wlw, Tline},
        name: "home",
        data() {
            return {
                baseInfo: [
                    {
                        title: '地块面积',
                        data: '5893.4公顷'
                    },
                    {
                        title: '地块种植品种',
                        data: '血橙、沃柑'
                    },
                    {
                        title: '经度',
                        data: `106°21'29''`
                    },
                    {
                        title: '纬度',
                        data: `29°27'33''`
                    },
                    {
                        title: '海拔',
                        data: '317.66米'
                    }
                ],
                weather: {
                    day_wind_direction: '',
                    day_wind_power: '',
                    day_air_temperature: '',
                    night_air_temperature: '',
                    sun_begin_end:"",
                },
                CurrentData: {
                    illuminance_sensor: '0', //光照
                    rainfall_sensor: '0', // 降雨量
                },
                controlHistory:[]
            }
        },
        mounted() {
            this.getLandIds()
            this.getWeather()
            this.getCurrentData('a')
            this.controlQuery()
        },
        methods: {
            getWeather() {
                getWeather({
                    "area": "重庆",
                }).then(res => {
                    this.weather = res.data.showapi_res_body.f1
                })
            },
            getLandIds() {
                getLandIds()
            },
            getCurrentData(LandIds) {
                getCurrentData(LandIds).then(res => {
                    this.CurrentData = res.data.data
                })
            },
            getHour(s1, s2) {
                var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
                s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'));
                s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'));
                var ms = s2.getTime() - s1.getTime();
                if (ms < 0) return 0;
                return Math.floor(ms / 1000 / 60 / 60);  //小时
            },
            controlQuery(){
                const reqData = {
                    "startTime": new Date(new Date().toLocaleDateString()).getTime() - 7*24*60*60*1000,
                    "endTime": (new Date()).getTime()
                }
                controlQuery(reqData).then(res=>{
                    this.controlHistory = res.data.data
                    console.log(this.controlHistory)
                })
            },
            placeMap(relayNum){
                const map = {
                    17:'农机所1区'
                }
                return map[relayNum]
            },
            dateFormat(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }
                    ;
                }
                ;
                return fmt;
            },
        },
    }
</script>

<style scoped lang="less">
    .left-part-container {
        position: relative;
        padding-top: 50px;
        /*border: 1px solid rgba(77,77,77,1);*/

        .part-title {
            position: absolute;
            left: -1px;
            top: -1px;
        }
    }

    .left-part-2 {
        margin-top: 10px;
        height: 644px;

        .refresh-icon {
            width: 18px;
            height: 18px;
            position: absolute;
            right: 16px;
            top: 15px;
            cursor: pointer;
        }

        .tree {
            position: absolute;
            top: 227px;
            left: 60px;
            width: 260px;
            height: 374px;
        }

        .params {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;

            .params-title {
                font-size: 14px;
                color: #FF4A47;
            }

            .params-icon {
                width: 64px;
                height: 72px;
            }

            .params-data {
                font-family: 'ziticqtezhanti';
                font-size: 20px;
                color: #F8733B;
                font-weight: 400;
            }
        }

        .params-win {
            top: 129px;
            left: 12px;
        }

        .params-air {
            top: 88px;
            left: 160px;
        }

        .params-sunny {
            top: 179px;
            right: 12px;
        }

        .params-temp {
            top: 481px;
            right: 10px;
        }

        .params-rain {
            top: 481px;
            left: 10px;
        }
    }

    .right-part-1 {
        padding: 55px 0 10px;
    }

    .right-part-2 {
        margin-top: 10px;
    }

    .right-part-3 {
        margin-top: 10px;
    }

    .logo {
        width: 400px;
        height: 92px;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .display-control-history{
        color: #fff;
        text-shadow: 0 0 1px #ffffff;
        padding: 10px;
        height: 300px;
        overflow: auto;
        .display-item{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            line-height: 22px;
        }
    }

    /* Demonstrate a "mostly customized" scrollbar
     * (won't be visible otherwise if width/height is specified) */
    .display-control-history::-webkit-scrollbar {
        width: 5px;
        height: 8px;
        background-color: rgba(7,7,7,0.74); /* or add it to the track */
    }

    /* Add a thumb */
    .display-control-history::-webkit-scrollbar-thumb {
        background: #aaa;
    }
</style>
